<template>
  <div>
    <div id="container_3" style="width: 100%; height: calc(100vh - 100px)">
      <div class="custom" style="width: 300px;height:200px">
        <el-button class="custom_button" type="primary" @click="tozdy()">自定义区域</el-button>
        <el-button v-if="showButton" class="finish_button" type="danger" @click="toggleCircle()">结束绘画</el-button>
      </div>
    </div>
    <div id="info">
      <el-dialog :visible.sync="dialogTableVisible">
        <el-form ref="form" :model="form" label-width="80px">
          <el-form-item label="区域名称" style="width: 30%">
            <el-input v-model="form.name"></el-input>
          </el-form-item>
          <el-form-item label="设备唯一码" style="width: 30%">
            <el-input v-model="form.weiyi"></el-input>
          </el-form-item>
          <el-form-item label="状态">
            <el-select v-model="form.status" placeholder="请选择活动区域">
              <el-option label="启动" value="1"></el-option>
              <el-option label="禁用" value="0"></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="设备编号" style="width: 30%">
            <el-input v-model="form.sid"></el-input>
          </el-form-item>
          <el-form-item>
            <el-button type="primary" @click="findPage()">查询</el-button>
            <el-button type="primary" @click="qingkong()">清空</el-button>
            <el-button type="primary" @click="toAdd()">添加区域</el-button>
          </el-form-item>
        </el-form>
        <el-table
            :data="tableData"
            border>
          <el-table-column
              fixed
              prop="id"
              label="序号">
          </el-table-column>
          <el-table-column
              prop="areaName"
              label="区域名称">
          </el-table-column>
          <el-table-column
              prop="weiyi"
              label="设备唯一码">
          </el-table-column>
          <el-table-column
              prop="creator"
              label="创建人账号">
          </el-table-column>
          <el-table-column
              label="状态">
            <template slot-scope="scope">
              <el-tag v-if="scope.row.status === 1" type="success">启动</el-tag>
              <el-tag v-else type="danger">禁用</el-tag>
            </template>
          </el-table-column>
          <el-table-column
              prop="sbid"
              label="设备编号">
          </el-table-column>
          <el-table-column
              prop="createdAt"
              label="创建时间">
          </el-table-column>
          <el-table-column
              prop="updatedAt"
              label="修改时间">
          </el-table-column>
          <el-table-column
              fixed="right"
              label="操作"
              width="100">
            <template slot-scope="scope">
              <el-button @click="ToUpdate(scope.row.id)" type="text" size="small">修改</el-button>
              <el-button @click="(scope.row)" type="text" size="small">删除</el-button>
            </template>
          </el-table-column>
        </el-table>
        <el-pagination
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
            :current-page="pageNum"
            :page-sizes="[5, 10, 15, 20]"
            :page-size="pageSize"
            layout="total, sizes, prev, pager, next, jumper"
            :total="total">
        </el-pagination>
      </el-dialog>
      <el-dialog title="添加区域" :visible.sync="dialogFormVisible">
        <el-form :model="quyu">
          <el-form-item label="区域名称" :label-width="formLabelWidth">
            <el-input v-model="quyu.areaName" autocomplete="off"></el-input>
          </el-form-item>
          <el-form-item label="区域半径" :label-width="formLabelWidth">
            <el-input v-model="quyu.radius" autocomplete="off"></el-input>
          </el-form-item>
          <el-form-item label="设备" :label-width="formLabelWidth">
            <el-select v-model="quyu.deviceId" placeholder="请选择活动区域">
              <el-option v-for="s in sbgl" :label="s.sbid" :value="s.id"></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="区域去噪参数" :label-width="formLabelWidth">
            <el-input v-model="quyu.noiseReductionParam" autocomplete="off"></el-input>
          </el-form-item>
          <el-form-item label="地址" :label-width="formLabelWidth">
            <el-input v-model="quyu.address" autocomplete="off"></el-input>
          </el-form-item>
          <el-form-item label="备注" :label-width="formLabelWidth">
            <el-input v-model="quyu.remarks" autocomplete="off"></el-input>
          </el-form-item>
          <el-form-item label="警报设置" :label-width="formLabelWidth">
            <el-radio v-model="quyu.alarmSetting" :label="0">进入围栏报警</el-radio>
            <el-radio v-model="quyu.alarmSetting" :label="1">离开围栏报警</el-radio>
          </el-form-item>
        </el-form>
        <div slot="footer" class="dialog-footer">
          <el-button @click="dialogFormVisible = false">取 消</el-button>
          <el-button type="primary" @click="toAddquyu">确 定</el-button>
        </div>
      </el-dialog>
      <el-dialog :visible.sync="yuan_xiangxi">
        <el-form :model="yuanshuju">
          <el-form-item label="区域名称" :label-width="formLabelWidth">
            <el-input v-model="yuanshuju.areaName" autocomplete="off"></el-input>
          </el-form-item>
          <el-form-item label="区域圆心经度" :label-width="formLabelWidth">
            <el-input v-model="yuanshuju.longitude" autocomplete="off" disabled></el-input>
          </el-form-item>
          <el-form-item label="区域圆心维度" :label-width="formLabelWidth">
            <el-input v-model="yuanshuju.latitude" autocomplete="off" disabled></el-input>
          </el-form-item>
          <el-form-item label="区域半径" :label-width="formLabelWidth">
            <el-input v-model="yuanshuju.radius" autocomplete="off"></el-input>
          </el-form-item>
          <el-form-item label="坐标类型" readonly>
            <el-select v-model="yuanshuju.coordinateType" :label-width="formLabelWidth" disabled>
              <el-option label="高德经纬度" value="高德经纬度"></el-option>
              <el-option label="百度经纬度" value="百度经纬度"></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="区域去噪参数" :label-width="formLabelWidth">
            <el-input v-model="yuanshuju.noiseReductionParam" autocomplete="off"></el-input>
          </el-form-item>
          <el-form-item label="地址" :label-width="formLabelWidth">
            <el-input v-model="yuanshuju.address" autocomplete="off"></el-input>
          </el-form-item>
          <el-form-item label="备注" :label-width="formLabelWidth">
            <el-input v-model="yuanshuju.remarks" autocomplete="off"></el-input>
          </el-form-item>
          <el-form-item label="警报设置" :label-width="formLabelWidth">
            <el-radio v-model="yuanshuju.alarmSetting" :label="0">进入围栏报警</el-radio>
            <el-radio v-model="yuanshuju.alarmSetting" :label="1">离开围栏报警</el-radio>
          </el-form-item>
        </el-form>
        <div slot="footer" class="dialog-footer">
          <el-button @click="quxiao()">取 消</el-button>
          <el-button type="primary" @click="updateYuan()">确 定</el-button>
        </div>
      </el-dialog>
    </div>
  </div>

</template>

<script>import AMapLoader from '@amap/amap-jsapi-loader';
import {formToJSON} from "axios";

export default {
  name: "Map",
  data() {
    return {
      dialogTableVisible: false,
      form: {},
      quyu:{},
      tableData: [],
      pageNum: 1,
      pageSize: 5,
      map: null,
      total: 0,
      dsad: {},
      circle: null,
      circleEditor: null,
      yuan_xiangxi: false,
      yuanshuju: {},
      formLabelWidth: '120px',
      showButton: false,
      dialogFormVisible: false,
      user: {},
      sbgl:{}
    }

  },
  methods: {
    handleSizeChange(val) {
      this.pageSize = val;
      this.findPage();
    },
    handleCurrentChange(val) {
      this.pageNum = val;
      this.findPage();
    },
    tozdy(){
      // if (this.yuanshuju.id != null) {
      //   return this.$message.error("请先保存当前区域")
      // }
      this.dialogTableVisible=true;
    },
    updateYuan() {
      this.showButton = false;
      if (this.yuanshuju.radius>=10000){
        return this.$message.error("半径不能大于10000")
      }
      this.axios.post("http://localhost:9007/zhylArea/update", this.yuanshuju).then(res => {
        this.yuan_xiangxi = false;
        this.findPage();
        this.toggleCircle();
        this.$message.success("修改成功");
      })
    },
    toAddquyu(){
      this.quyu.creator=this.user.username;
      this.axios.post("http://localhost:9007/zhylArea/toadd", this.quyu).then(res => {
        this.findPage();
        this.$message.success("添加成功");
        this.dialogFormVisible=false;
      })
    },
    qingkong() {
      this.form = {};
      this.findPage();
    },
    toAdd(){
      this.dialogFormVisible = true;
    },
    ToUpdate(id) {
      this.showButton = true;
      this.axios.post(`http://localhost:9007/zhylArea/findById?id=${id}`).then(res => {
        this.dsad = res.data.data;
        this.dialogTableVisible = false;
        this.longitude = res.data.data.longitude;
        this.latitude = res.data.data.latitude;
        this.yuan = res.data.data.radius
        this.addYuan(res.data.data.id);
        this.goToLocation();
      });
    },
    findSbgl(){
      this.axios.post(`http://localhost:9007/zhylArea/findSbgl`).then(res => {
        this.sbgl = res.data.data;
      });
    },
    quxiao() {
      this.showButton = false;
      this.yuan_xiangxi = false;
      this.toggleCircle();
    },
    async goToLocation() {
      const [lng, lat] = [this.longitude, this.latitude];
      this.map.setZoom(15); // 设置缩放级别
      this.map.setCenter([lng, lat]);
    },
    async addYuan(id) {
      this.circle = new AMap.Circle({
        center: [this.longitude, this.latitude],
        radius: this.yuan, //半径
        borderWeight: 3,
        strokeColor: "#FF33FF",
        strokeWeight: 6,
        strokeOpacity: 0.2,
        fillOpacity: 0.4,
        strokeStyle: 'dashed',
        strokeDasharray: [10, 10],
        // 线样式还支持 'dashed'
        fillColor: '#1791fc',
        zIndex: 50,

      });

      this.map.add(this.circle);
      // 缩放地图到合适的视野级别
      this.map.setFitView([this.circle]);
      this.circle.on('click', () => {
        var sid = id;
        this.showInfoWindow(sid);
      });
      // 将圆形添加到地图

    },
    showInfoWindow(sid) {
      this.yuanxq(sid);
      this.yuan_xiangxi = true;
    },
    initMap(){
      AMapLoader.load({
        key: '090843d2967de6adc0b44ae4f47e9dc0', // 替换为你的API Key
        version: '2.0',
        plugins: ["AMap.CircleEditor,AMap.Circle"]
      }).then(AMap => {
        this.map = new AMap.Map('container_3', {
          zoom: 10,
          center: [117.11, 35.11] // 初始中心点
        });
      }).catch(e => {
        console.error('地图加载失败', e);
      });
    },
    yuanxq(sid) {
      this.axios.post(`http://localhost:9007/zhylArea/findById?id=${sid}`).then(res => {
        this.yuanshuju = res.data.data;
      });
    },
    findPage() {
      this.axios.post(`http://localhost:9007/zhylArea/findPage?pageNum=${this.pageNum}&pageSize=${this.pageSize}`, this.form).then(res => {
        this.tableData = res.data.data.records;
        this.total = res.data.data.total;
      });
    },
    toggleCircle() {
      this.showButton=false;
      if (this.circle.getMap()) {
        this.circle.setMap(null); // 隐藏圆
      }
    }
  },
  mounted() {
    // // 创建地图实例
    AMapLoader.load({
      key: '090843d2967de6adc0b44ae4f47e9dc0', // 替换为你的API Key
      version: '2.0',
      plugins: ["AMap.CircleEditor,AMap.Circle"]
    }).then(AMap => {
      this.map = new AMap.Map('container_3', {
        zoom: 10,
        center: [117.11, 35.11] // 初始中心点
      });
    }).catch(e => {
      console.error('地图加载失败', e);
    });
    AMap.event.addListener(this.circle, 'click', () => {
      infoWindow.open(this.map, this.circle.getCenter());
    });
    const infoWindow = new AMap.InfoWindow({
      content: '<div style="text-align:center;"></div>', // 弹窗内容
      offset: new AMap.Pixel(0, -30) // 弹窗偏移量
    });
  },
  created() {
    this.findPage();
    this.user=JSON.parse(sessionStorage.getItem('userDB'));
    this.findSbgl();
  }
}
</script>

<style scoped>
.custom {
  float: left;
  position: absolute;
  z-index: 999;

  //background-color: #c8c8c8;
  //opacity : 0.8;
}
.custom_button{
  float: left;
  z-index:999;
}

</style>

